.all-message {
		margin-top: 20px;

		.remarks {
			padding: 20px;
		}
	}

	.about {
		padding-top: 100px;
	}

	.content-warp {
		.about-info {
			padding: 20px 10px;
			margin: 30px 0;
			background-color: #FFFFFF;

			span {
				color: red;
				margin-right: 10px;
			}

			.info-card {
				min-height: 100px;
				padding: 20px;
				border-radius: 3px;

				/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
				p {
					line-height: 1.7rem;
				}

				.top {
					.user-avatar-image {
						vertical-align: top;
					}

					.top-info {
						display: inline-block;
						border-left: 1px solid #dcdcdc;
						padding-left: 20px;
						margin-left: 10px;
						font-size: 14px;
					}

					border-bottom: 1px dashed #dcdcdc;
					padding-bottom: 10px;
				}
				.in{
					img{
						&:hover{
							    transform: scale(1.1, 1.1);
							    filter: contrast(130%);
						}
					}
				}
			}
		}

		.contactForm {
			width: 100%;
			padding: 20px;

			.form-item {
				align-items: center;
				display: flex;

				&:not(:last-child) {
					margin-bottom: 20px;
				}

				label {
					width: 80px;
				}

				.v {
					min-height: 40px;
					line-height: 20px;
					border-radius: 3px;
					padding: 2px 10px;
					outline: none;
					border: 1px solid #8fd0cc;
					width: 100%;
					resize: vertical;
				}

				button {
					width: 100px;
					height: 40px;
					border-radius: 3px;
					outline: 0;
					border-style: none;
					cursor: pointer;
					background-color: #409eff;
					color: white;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}

	/*******/
	@media (max-width: 800px) {
		.content-warp {
			margin-top: 0;
		}
	}

	.site-content {
		/* background-color: #FFFFFF; */
		padding: 10px 20px;
	}